import React from 'react';
import { Menu, Button } from 'antd';
import {
    AppstoreOutlined,
    MailOutlined,
    PictureOutlined,
    EditOutlined,
    DotChartOutlined,
    EllipsisOutlined,
    BorderOutlined,
    StarOutlined,
    AppstoreAddOutlined,
    BlockOutlined,
    WarningOutlined,
    UndoOutlined,
    DeleteOutlined
} from '@ant-design/icons';
// import type { MenuProps } from 'antd';
import './leftSide.css';
// import { StaticCanvas, FabricText } from 'fabric';

const items = [
    {
        key: 'text',
        label: '文字',
        icon: <MailOutlined />
    },
    {
        key: 'shapes',
        label: '图形',
        icon: <AppstoreOutlined />,
        children: [
            { key: 'brush', label: '画笔', icon: <EditOutlined /> },
            { key: 'circle', label: '圆', icon: <DotChartOutlined /> },
            { key: 'ellipse', label: '椭圆', icon: <EllipsisOutlined /> },
            { key: 'square', label: '正方形', icon: <BlockOutlined /> },
            { key: 'rectangle', label: '矩形', icon: <BorderOutlined /> },
            { key: 'triangle', label: '三角形', icon: <WarningOutlined /> },
            { key: 'pentagon', label: '五边形', icon: <AppstoreAddOutlined /> },
            { key: 'hexagon', label: '六边形', icon: <AppstoreAddOutlined /> },
            { key: 'star', label: '星', icon: <StarOutlined /> },
            { key: 'diamond', label: '菱形', icon: <AppstoreAddOutlined /> },
            { key: 'trapezoid', label: '梯形', icon: <AppstoreAddOutlined /> },
            { key: 'parallelogram', label: '平行四边形', icon: <AppstoreAddOutlined /> },
            { key: 'arrow', label: '箭头', icon: <AppstoreAddOutlined /> }
        ]
    },
    {
        key: 'image',
        label: '图片',
        icon: <PictureOutlined />
    }
];

const LeftSide = ({ onShapeClick, onResetZoom, onClearCanvas }) => {
    const onClick = (e) => {
        console.log('click ', e);
        if (onShapeClick) {
            onShapeClick(e.key);
        }
    };

    return (
        <div className="left-side-menu">
            <Menu onClick={onClick} style={{ width: 150 }} mode="inline" items={items} />
        </div>
    );
};

export default LeftSide;
